  <template>
  <div class="cate-box">
    <!-- 头部 -->
    <van-nav-bar title="商品分类" left-arrow @click-left="onClickLeft" />
    <!-- 内容部分 -->
    <main class="content">
      <!-- 渲染左侧导航栏 -->
      <van-sidebar v-model="activeKey" @change="changeCate">
        <van-sidebar-item
          v-for="(item, index) in cateList"
          :key="index"
          :title="item"
        />
      </van-sidebar>
      <!-- 把左侧导航栏所对应的品牌渲染到右边区域 -->
      <van-grid :column-num="4">
        <van-grid-item v-for="(item,index) in goodsList" :key="index" :text="item.brand" @click="goBrand(item)"/>
      </van-grid>
    </main>
    <!-- 底部 -->
    <FooterVue>
    </FooterVue>
  </div>
</template>

<script>
import FooterVue from "@/components/footerVue.vue";
import axios from "axios";
export default {
  name: "category",
  data() {
    return {
      // 当前导航项的索引
      activeKey: 0,
      cateList: [],
      goodsList: [],
      category:'手机'
    };
  },
  created() {
    let getCateList = () => {
      return axios({
        url: "http://121.89.205.189:3001/api/pro/categorylist",
      });
    };
    let getCateGoodsList = () => {
      return axios({
        url: "http://121.89.205.189:3001/api/pro/categorybrandlist",
        params: {
          category: this.category,
        },
      });
    };
    axios.all([getCateList(), getCateGoodsList()]).then(
      axios.spread((cateRes, goodsRes) => {
        if (cateRes.data.code == 200) {
          // console.log(cateRes.data);
          this.cateList = cateRes.data.data;
        }
        if(goodsRes.data.code==200){
          this.goodsList=goodsRes.data.data
        }
      })
    );
  },
  components: {
    FooterVue,
  },
  methods: {
    onClickLeft() {
      // console.log("返回去了哦！");
      this.$router.back()
      // Toast('返回');
    },
    changeCate(index) {
      this.category=this.cateList[index]
      // console.log(this.category);
      axios({
        url: "http://121.89.205.189:3001/api/pro/categorybrandlist",
        params: {
          category: this.category,
        },
      }).then((res) => {
        this.goodsList=res.data.data
      });
    },
    goBrand(item){
      let brand=item.brand;
      let category=this.category
      this.$router.push(`/brandGoods?brand=${brand}&category=${category}`);
      // this.$router.push('/brandGoods');
      console.log(brand,category)
    }
  },
};
</script>

<style scoped>
.cate-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  overflow: auto;
  display: flex;
}
.van-grid{
  flex: 1;
  align-self: flex-start;
}
.van-grid-item{
  height: 4rem;
}
</style>